<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myEcharts</title>
    <link rel="stylesheet" href="./css/echarts.css">
</head>

<body>
    <header>
        <h1>数据可视化-myEcharts</h1>
        <div class="getTimer">当前时间2020年9月13日 - 22时 : 49分</div>
    </header>
    <!-- <div class="box"></div> -->
    <div class="mainBox">
        <div class="column">
            <div class="mapBox bar">
                <h2>柱状数据分析-就业行业</h2>
                <div class="box"></div>
                <div class="mapBox_footer"></div>
            </div>
            <div class="mapBox line">
                <h2>折线数据分析-人员变化</h2>
                <div class="box"></div>
                <div class="mapBox_footer"></div>
            </div>
            <div class="mapBox pie">
                <h2>饼形数据分析-年龄分布 </h2>
                <div class="box"></div>
                <div class="mapBox_footer"></div>
            </div>
        </div>
        <div class="column">
            <div class="nb">
                <div class="hd">
                    <div class="nb1" id="number1">237777</div>
                    <div class="nb2" id="number2">69370</div>
                </div>
                <div class="bd">
                    <div class="bd1">前端需求人数</div>
                    <div class="bd2">市场供应人数</div>
                </div>
            </div>
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="map4"></div>
            </div>
        </div>
        <div class="column">
            <div class="mapBox bar2">
                <h2>柱状数据分析-技能掌握</h2>
                <div class="box"></div>
                <div class="mapBox_footer"></div>
            </div>
            <div class="mapBox line2">
                <h2>折线数据分析-播放量</h2>
                <div class="box"></div>
                <div class="mapBox_footer"></div>
            </div>
            <div class="mapBox pie2">
                <h2>饼形数据分析-地区分布</h2>
                <div class="box"></div>
                <div class="mapBox_footer"></div>
            </div>
        </div>
    </div>
</body>
<script src="./js/flexible2.js"></script>
<script>
    // 页面加载渲染信息
    setTimer(".getTimer");
    // 渲染当前时间内容的方法
    function setTimer(giveDom) {
        var timer;
        clearInterval(timer);
        // 判断传入dom是否为对象,是就直接用,不是就走获取
        var dom = typeof giveDom === "string" ? document.querySelector(giveDom + '') : giveDom;
        var date = new Date();
        var getYear = date.getFullYear();
        var getMonth = date.getMonth();
        var getDay = date.getDate();
        var getQ = date.getDay();
        switch (getQ) {
            case 0:
                getQ = "日";
                break;
            case 1:
                getQ = "一";
                break;
            case 2:
                getQ = "二";
                break;
            case 3:
                getQ = "三";
                break;
            case 4:
                getQ = "四";
                break;
            case 5:
                getQ = "五";
                break;
            case 6:
                getQ = "六";
                break;
        }
        var getH = date.getHours();
        getH = getH < 10 ? "0" + getH : getH;
        var getM = date.getMinutes();
        getM = getM < 10 ? "0" + getM : getM;
        var getS = date.getSeconds();
        getS = getS < 10 ? "0" + getS : getS;
        // 执行渲染
        dom.innerHTML = `敬爱的李花 当前时间为 ${ getYear }年${ getMonth + 1 }月${getDay}日 星期${getQ} - ${getH}时 : ${getM}分 : ${getS}秒`;
    }
    var box = document.querySelector(".getTimer")
    var timer = setInterval(function () {
        setTimer(box);
    }, 1000);
</script>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="./js/echarts_index.js"></script>
<script>
    // 获取 Dom
    var nb1 = document.querySelector("#number1");
    var nb2 = document.querySelector("#number2");
    var goNb = function (index, giveDom,speed) {
        var dom = typeof giveDom === "string" ? document.querySelector(giveDom + '') : giveDom;
        let timer = setInterval(function(){
            if(dom.innerHTML < index){
                dom.innerHTML++;
            }
        },speed);
    }
    goNb(1000000,nb1,30);
    goNb(900000,nb2,150);
</script>

</html>